<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="..\node_modules\vue\dist\vue.js"></script>
    <style type="text/css">
        .ld {
            margin-left: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    {{formData.pvFromData}}
    <parent class="ld" :pv.sync="formData.pvFromData"></parent>
</div>
<hr/>

</body>
<script type="application/javascript">
    Vue.component(
        'parent',
        {
            template:`
              <div @click="add">
              {{mypv}}
              </div>`,
            props:["pv"],
            data:function(){
                return {
                    "mypv" : this.pv
                }
            },
            methods:{
                add:function(){
                    this.mypv += 1;
                    this.$emit('update:pv', this.mypv);
                }
            }
        }
    );

    var app_data = {
        formData:{
            pvFromData:0
        }
    };

    var app = new Vue({
        el: '#app',
        data: app_data
    });

</script>
</html>